import React, { useEffect, useState } from "react";
import { Input, Space } from 'antd';
import {useJsonStore} from "@/DragAndDrop/provider";
import {Col, Form, Row} from "dw-mx";

export default function ComponentConfig(props) {
    const {currentComponent,changeComponentConfig,pageJson} = useJsonStore();

    const [form] = Form.useForm();
    useEffect(() => {
        if(currentComponent && currentComponent['props']['style']){
            const style = currentComponent['props']['style'];
            form.setFieldsValue({
                width:style['width'],
                height:style['height'],
                margin:style['margin'],
                padding:style['padding']
            });
        }
    }, [currentComponent]);

    const changeStyle = ()=>{
        // 获取当前数据
        if(currentComponent && currentComponent['props']['style']){
            const formData = form.getFieldsValue();
            const newComponent = {...currentComponent,
                props:{
                    ...currentComponent['props'],
                    style:{
                        ...currentComponent['props']['style'],
                        width:formData['width'],
                        height:formData['height'],
                        margin:formData['margin'],
                        padding:formData['padding']
                    }
                }
            };
            changeComponentConfig(newComponent,pageJson);
        }
    };


    return (
        <div>
            <Form labelCol={{span:6}} wrapperCol={{span:18}} form={form}>
                <Row>
                    <Input disabled value={"当前组件："+(currentComponent && currentComponent['id'] ? currentComponent['id'] : '')}/>
                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item label={'宽'} name={'width'}>
                            <Input placeholder="例：200px,2rem" onBlur={changeStyle} onChange={(event)=>{
                                const formData = form.getFieldsValue();
                                form.setFieldsValue({
                                    ...formData,
                                    width:event.target.value
                                })
                            }} />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label={'高'} name={'height'}>
                            <Input placeholder="例：200px,2rem" onBlur={changeStyle} onChange={(event)=>{
                                const formData = form.getFieldsValue();
                                form.setFieldsValue({
                                    ...formData,
                                    height:event.target.value
                                })
                            }} />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label={'内边距'} name={'padding'}>
                            <Input placeholder="例：2px 2px 2px 0px" onBlur={changeStyle} onChange={(event)=>{
                                const formData = form.getFieldsValue();
                                form.setFieldsValue({
                                    ...formData,
                                    padding:event.target.value
                                })
                            }}/>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label={'外边距'} name={'margin'}>
                            <Input placeholder="例：2px 2px 2px 0px" onBlur={changeStyle} onChange={(event)=>{
                                const formData = form.getFieldsValue();
                                form.setFieldsValue({
                                    ...formData,
                                    margin:event.target.value
                                })
                            }}/>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </div>
    );
}